<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>学员信息表</title>
	<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.css">
</head>
<body>
	<div class="jumbotron text-center">
	  <h1 class="display-4">学员信息表</h1>
	  <p class="lead">1804</p>
	</div>
	<div class="container">
		<h2 class="mt-4">添加</h2>
		<div class="row">
			<div class="col-md-3">
				<input type="text" class="form-control" id="name" placeholder="姓名">
			</div>
			<div class="col-md-3">
				<select class="form-control sex" id="exampleFormControlSelect1">
				    <option>男</option>
				    <option>女</option>
			    </select>
			</div>
			<div class="col-md-3">
				<input type="number" class="form-control" id="age" placeholder="年龄">
			</div>
			<div class="col-md-3">
				<button type="button" id="btn" class="btn btn-primary w-100">添加</button>
			</div>
		</div>

	</div>
	<div class="container" id="content">
		<h2 class="mt-5">列表</h2>
		<table class="table text-center">
			<thead>
		    	<tr>
		    		<th scope="col">姓名</th>
		    		<th scope="col">性别</th>
		    		<th scope="col">年龄</th>
		    	</tr>
		  	</thead>
		  	<tbody id="list" class="border-bottom"></tbody>
		</table>
	</div>
	<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
	<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.js"></script>


	<script>
		function demo(){
			var xmlhttp;
			if (window.XMLHttpRequest){
				xmlhttp=new XMLHttpRequest();
			}else{
				xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
			}
			xmlhttp.onreadystatechange=function(){
				if (xmlhttp.readyState==4 && xmlhttp.status==200){
					var json = JSON.parse(xmlhttp.responseText)
					console.log(json)
					document.querySelector("#list").innerHTML=""
					for(var i = 0;i<json.data.length;i++){
						var tr = document.createElement("tr")
						var name = document.createElement("td")
						name.innerHTML = json.data[i].studentName;
						var sex = document.createElement("td")
						sex.innerHTML = json.data[i].sex;
						var age = document.createElement("td")
						age.innerHTML = json.data[i].age;
						tr.appendChild(name)
						tr.appendChild(sex)
						tr.appendChild(age)
						document.querySelector("#list").appendChild(tr)
					}
				}
			}
			xmlhttp.open("GET","http://localhost/ajaxApi/public/index.php/index/student/student",true);
			xmlhttp.send();
		}
		demo()
		document.querySelector("#btn").onclick=function(){
			var name = document.querySelector("#name").value;
			var sex = document.querySelector(".sex").value;
			var age = document.querySelector("#age").value;
			var xmlhttp;
			if (window.XMLHttpRequest){
				xmlhttp=new XMLHttpRequest();
			}else{
				xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
			}
			xmlhttp.onreadystatechange=function(){
				
					if (xmlhttp.readyState==4 && xmlhttp.status==200){
						var json = JSON.parse(xmlhttp.responseText)
						console.log(json)
						demo()
					}
				
				
			}
			xmlhttp.open("GET","http://localhost/ajaxApi/public/index.php/index/student/addStudent?"+"studentName="+name+"&sex="+sex+"&age="+age,true);
			xmlhttp.send();
		}
	</script>
</body>
</html>